<template>
	<el-dialog title="选择试卷" :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px" @closed="resetForm()">
		<div class="question-select">
			<div class="question-type">
				<ul @click="handleTypeChange">
					<li :class="{ active: listQuery.permission == 1 }" data-type="1">我的试卷</li>
					<li :class="{ active: listQuery.permission == 2 }" data-type="2">共享试卷</li>
				</ul>
			</div>
			<div class="question-search">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-input v-model="listQuery.name" placeholder="请输入题干关键词" @input="getList" size="small" clearable></el-input>
					</el-col>
					<el-col :span="12">
						<el-select v-model="listQuery.paperType" placeholder="请选择试卷类型" style="width: 100%" size="small" clearable @change="getList">
							<el-option label="普通试卷" value="1"></el-option>
							<el-option label="随机试卷" value="2"></el-option>
						</el-select>
					</el-col>
				</el-row>
			</div>
			<div class="question-wrap">
				<el-table ref="multipleTable" :data="tableData" stripe size="mini" style="width: 100%" max-height="460">
					<el-table-column prop="name" label="试卷名称" show-overflow-tooltip>
						<template slot-scope="{ row }">
							<span>{{ row.name }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="examClassId" label="分类" width="100" show-overflow-tooltip>
						<template slot-scope="{ row }">
							<span>{{ row.sysClassify.name }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="paperType" label="类型" width="100">
						<template slot-scope="{ row }">
							<span v-if="row.paperType == 1" class="color-primary">普通试卷</span>
							<span v-if="row.paperType == 2" class="color-success">随机试卷</span>
						</template>
					</el-table-column>
					<el-table-column prop="totalScore" label="总分" width="100">
						<template slot-scope="{ row }">
							<span>{{ toFixeds(row.totalScore) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
					<el-table-column label="操作" width="100">
						<template slot-scope="{ row }">
							<el-button type="primary" size="mini" plain icon="el-icon-plus" v-if="selectedTast.id != row.id" @click="handleSelect(row, 1)">使用</el-button>
							<el-button type="danger" size="mini" plain icon="el-icon-minus" @click="handleSelect(row, 2)" v-if="selectedTast.id == row.id">移除</el-button>
						</template>
					</el-table-column>
					<div slot="empty" class="emptyBg">
						<el-empty :image-size="200"></el-empty>
					</div>
				</el-table>
				<Pagination v-show="parseInt(pageObj.count) > 0" :total="parseInt(pageObj.count)" @change="getList" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
		</span>
	</el-dialog>
</template>
<script>
export default {
	data() {
		return {
			dialogVisible: false,
			listQuery: {
				name: '',
				status: 1,
				permission: '1',
				page: 1,
				limit: 10
			},
			tableData: [],
			pageObj: {},
			selectedTast: {},
			checkedId: ''
		};
	},
	mounted() {
		this.$bus.$on('showDialogTastSelect', (id) => {
			this.listQuery = this.$options.data().listQuery;
			this.checkedId = id;
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('showDialogTastSelect');
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('testPaperList', this.listQuery);
			this.tableData = res.data;
			this.pageObj = res;
			this.dialogVisible = true;
			if (!this.checkedId) return;
			let checkedArr = this.tableData.filter((v) => v.id == this.checkedId);
			this.selectedTast = checkedArr.length ? checkedArr[0] : {};
		},
		handleTypeChange(e) {
			let type = e.target.getAttribute('data-type');
			this.listQuery.permission = type;
			this.getList();
		},
		handleSelect(row, type) {
			this.selectedTast = type == 1 ? row : {};
			this.$emit('emit', this.selectedTast);
			this.dialogVisible = false;
		},
		resetForm() {
			this.selectedTast = {};
			this.checkedId = '';
		}
	}
};
</script>
<style scoped lang="scss">
.question-select {
	padding: 5px;
	border: 1px solid #eee;
	.question-type {
		height: 42px;
		border: 1px solid #eee;
		ul {
			li {
				float: left;
				width: 50%;
				height: 42px;
				line-height: 42px;
				text-align: center;
				cursor: pointer;
				&.active {
					color: #333;
					background: #eee;
				}
			}
		}
	}
	.question-search {
		margin: 10px 0;
	}
	.question-wrap {
		min-height: 400px;
	}
}
</style>
